<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">主子表Demo</block></cu-custom>
		<scroll-view scroll-x class="bg-white nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">单行文本</view>
				<input placeholder="请输入内容" name="input"></input>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">文本框</view>
				<textarea maxlength="-1" placeholder="多行文本输入框"></textarea>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">单选</view>
				<js-radio dict="sys_menu_type"></js-radio>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">多选</view>
			</view>
			<js-checkbox dict="sys_menu_type"></js-checkbox>
			<view class="cu-form-group">
				<view class="title">日期选择</view>
				<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group align-start" @click="showUser">
				<view class="title">用户选择</view>
				
			</view>
			<view class="cu-form-group align-start" @click="showOrg">
				<view class="title">组织机构选择</view>
				
			</view>	
			<view class="cu-form-group align-start" @click="showArea">
				<view class="title">区域选择</view>
			</view>
			<view class="cu-form-group align-start" @click="showUserList">
				<view class="title">用户列表选择</view>
			</view>
			<js-images></js-images>
			<js-file></js-file>
		</form>
		<!-- <js-list></js-list> -->
		<tki-tree ref="userTree" :range="treeData" confirmColor="#4e8af7" range-key="label" title="用户选择" titleColor="blue" url="/a/sys/office/treeData?isLoadUser=true"/>
		<tki-tree ref="orgTree" :range="treeData" confirmColor="#4e8af7" range-key="label" title="1232" titleColor="blue" url="/a/sys/office/treeData"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabNav: ['主表', '子表'],
				TabCur: 0,
				CustomBar: this.CustomBar,
				modalName: "",
				treeData:[{ id: 1, name: '题库', children: [{ id: 11, name: '语文', children: [{ id: 111, name: '高一卷', },{ id: 112, name: '高二卷', }] },{ id: 12, name: '数学', } ] }, { id: 2, name: '高考', children: [{ id: 21, name: '高考1', },{ id: 22, name: '高考2', },{ id: 23, name: '高考3', }, ] }, { id: 3, name: '课程' }, { id: 4, name: '论文', children: [{ id: 41, name: '论文分享', }] } ],
				
				// 表单需要的数据
				
			};
		},
		mounted(){
			setTimeout(()=>{
				console.log(12321)
			},1000)
			
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				
				
			},
			showUser(){
				
				this.$refs.userTree._show()
			},
			showArea(){
				
				this.$refs.areaTree._show()
			},
			showOrg(){
				
				this.$refs.orgTree._show()
			}
		}
	}
</script>

<style>
	page {
		/* padding-top: 45px; */
	}
</style>